<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0" />
		<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
		<meta name="renderer" content="webkit" />
		<title>图应用</title>
		<link rel="stylesheet" href="css/set.css">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" href="Graph/graph.css">

	</head>
	<body>
		<!--app-->
		<div id="app">
			<!--顶部-->
			<nav class="navbar navbar-default">
				<div class="container">
					<div class="navbar-header nava">
						<!--小屏幕导航按钮-->
						<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!--logo-->
						<a href="index.html" class="navbar-brand">图与树应用数据可视化系统</a>
					</div>
					<!--小屏幕导航-->
					<div class="navbar-collapse collapse nava">
						<ul class="nav navbar-nav">
							<li><a class="myindex" href="index.html"><span class="glyphicon glyphicon-home">前台首页</span></a></li>
							<li><a href="tree1.html"><span class="glyphicon glyphicon-tree-deciduous">树应用</span></a></li>
							<li><a href="Graph1.html"><span class="glyphicon glyphicon-book">图应用</span></a></li>
						</ul>
						<!--Admin-->
						<ul class="nav navbar-nav navbar-right">
							<li class="dropdown">
								<a id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<span class="glyphicon glyphicon-user"></span>
									Admin
									<span class="caret"></span>
								</a>
								<ul class="dropdown-menu" aria-labelledby="dLabel">
									<li><a href="index.html">
											<span class="glyphicon glyphicon-home"></span>&nbsp;前台首页
										</a></li>
									<li><a href="tree1.html"><span class="glyphicon glyphicon-tree-deciduous">树应用</span></a></li>
									<li><a href="Graph1.html"><span class="glyphicon glyphicon-book">图应用</span></a></li>
								</ul>
							</li>
							<li class="closes"><a href="javascript:close();"><span
										class="glyphicon glyphicon-off"></span>&nbsp;退出</a></li>
						</ul>
					</div>
				</div>
			</nav>
			<!--下边栏-->
			<div class="tabs">
				<div>
					<router-view :key="activeDate"></router-view>
					<ul class="tab">
						<li>
							<a href="Graph1.html"><span class="glyphicon glyphicon-send"></span>有向图</a>
						</li>
						<li>
							<a href="Graph2.html"><span class="glyphicon glyphicon-unchecked"></span>无向图</a>
						</li>
						<li>
							<a href="Graph3.html"><span class="glyphicon glyphicon-refresh"></span>Dijkstra路径</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!--图的遍历-->
		<template id="temp">
			<div class="temp details container">
				<div class="row">
					<div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
						<div class="panel panel-default">
							<div class="panel-heading">无向图</div>
							<div class="panel-body">
								<!--图的遍历-->
								<div class="test">
									<div class="container2">
										<div class="row">
											<div class="control col-xs-12 col-sm-6 col-md-7 col-lg-7">
												<div class="start" style="margin: 0 auto;">
													<form action="#">
														<input class="btn btn-success" type="button" id="Anode"
														value="添加结点" style="margin-top: 5px;">
														
													<input class="btn btn-success" type="button" id="Dnode"
														value="删除结点" style="margin-top: 5px;">
													</form>					
													<div class="sn">
														<h4>起点</h4>
														<select id="Snode" class="form-control">
															<option>v0</option>
														</select>
													</div>
													<div class="en">
														<h4>终点</h4>
														<select id="Enode" class="form-control">
															<option>v0</option>
														</select>
													</div>
													
													<form action="#">
														<h4>边权赋值</h4>
														<input class="form-control" type="number" id="weight"
															placeholder="边权" name="weight">
													</form><br>
													<input class="btn btn-success" type="button" id="Ajst"
														value="生成邻边">
													<input class="btn btn-success" type="button" id="reset"
														value="重置结点">	
													<div class="n" >
														<h4>初始结点</h4>
														<select class="form-control">
															<option>v0</option>
														</select>
													</div>
												</div>
												<br>
												<input id="button2" class="btn btn-info" type="button" name="click"
													value="最短路径">
											</div>
											<div class="svg col-xs-12 col-sm-6 col-md-5 col-lg-5" style="text-align: center;display: inline;">
												<svg id="svg" width="240" height="300"></svg>
											</div>
											<div class="col-xs-12 col-sm-6 col-md-5 col-lg-5">
												<div class="mytitle col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align: center;display: inline;">
													
												</div>
												<ul class="graph_node2 col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align: left;display: block;"></ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</template>
		<!--最短路径-->
		<!-- <template id="heart">
			<div class="heart details container">
				<div class="row">
					<div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 mb2">
						<div class="panel panel-default">
							<div class="panel-heading">无向图</div>
							<div class="panel-body">
								<!--最短路径-->
								<!-- <div class="test">
									<div class="container2">
										<div class="row">
											<div class="control col-xs-12 col-sm-6 col-md-7 col-lg-7">
												<div class="start" style="margin: 0 auto;">
													<form action="#">
														<input class="btn btn-success" type="button" id="Anode"
														value="添加结点" style="margin-top: 5px;">
														
													<input class="btn btn-success" type="button" id="Dnode"
														value="删除结点" style="margin-top: 5px;">
													</form>					
													<div class="sn">
														<h4>起点</h4>
														<select id="Snode" class="form-control">
															<option>v0</option>
														</select>
													</div>
													<div class="en">
														<h4>终点</h4>
														<select id="Enode" class="form-control">
															<option>v0</option>
														</select>
													</div>
													
													<form action="#">
														<h4>边权赋值</h4>
														<input class="form-control" type="number" id="weight"
															placeholder="边权" name="weight">
													</form><br>
													<input class="btn btn-success" type="button" id="Ajst"
														value="生成边">
													<input class="btn btn-success" type="button" id="reset"
														value="重置">	
													<div class="n" >
														<h4>初始结点</h4>
														<select id="node" class="form-control" style="display: inline-block;">
															<option>v0</option>
														</select>
													</div>
												</div>
												<div class="way">
													<h4>计算方式</h4>
													<select id="select" class="form-control" style="width:108px;">
														<option>Floyd</option>
														<option>dijkstra</option>
													</select>
												</div><br>
												<input id="button" class="btn btn-info" type="button" name="click"
													value="开始计算">
											</div>
											<div class="svg col-xs-12 col-sm-6 col-md-5 col-lg-5" style="text-align: center;display: inline;">
												<svg id="svg" width="240" height="300"></svg>
											</div>
											<div class="col-xs-12 col-sm-6 col-md-5 col-lg-5">
												<div class="mytitle col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align: center;display: inline;">
													<h3>计算结果</h3>
												</div>
												<ul class="graph_node col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align: center;"></ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</template> -->

	</body>
	<!--vue-->
	<script src="js/vue.min.js"></script>
	<script src="js/vue-rooter.min.js"></script>
	<!--bootstrap-->
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<!--自定义-->
	<script src="js/Myvue.js"></script>
	<script src="js/set.js"></script>
	<script src="js/ytmenu.js"></script>
	<script src="graph/graph3.js"></script>

</html>
